<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传组件</title>
    <link rel="stylesheet" href="imgupload.css" />
</head>
<body>
    
    <button class="showModel" id="J_showModel">显示</button>
    <button class="showModel" id="showModel">123</button>
    <div class="uploadModel" id="J_uploadModel">
        <div class="uploadModel-th clearfix">
            <span class="fl th-txt">上传图片</span>
            <span class="fl th-txt s1">图片大小不能超过<span class="uploadModel-th-tips"></span></span>
            <span class="fr close-uploadModel"></span>
        </div>
        <div class="uploadModel-tb">
            <!-- 选择区 -->
            <div class="choose-btn-area">
                <p>+</p>
                <span>选择图片</span>
            </div>
            <!-- 裁剪区 -->
            <div class="image-editor">
                <input type="file" class="cropit-image-input" id="cropit-image-input" />
                <div class="cropit-preview" id="cropit-preview"></div>
                <div class="group-range">
                    <span class="fd group-range-icon fr"></span>
                    <span class="sx group-range-icon fl"></span>
                    <input type="range"  class = "cropit-image-zoom-input"  value="0" />
                </div>
            </div>
            <!-- 错误提示区 -->
            <div class="errorMask">
                <div>
                    <span class="errorIcon"></span>
                    <p class="upload-error-tips"></p>
                </div>
            </div>
        </div>
        <!-- 按钮区 -->
        <div class="uploadModel-footer">
            <a href="#" class="uploadModel-btn uploadModel-btn-rechoose">重新选择</a>
            <a href="#" class="uploadModel-btn uploadModel-btn-sure">确定</a>
        </div>

        <!-- loading -->
        <div class="loader-wrap">
            <div class="loader-inner ball-beat">
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
    </div>
    <img id="image" dynsrc="" />
<script type="text/javascript" src="/js/common/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="jquery.cropit.js"></script>
<script type="text/javascript" src="imgupload.js"></script>
<script>
    function successCallback(ret) {
        if(ret.retCode == 1) {
            alert(ret.fileName);
        }
    }
    function failCallback(ret) {
        alert("fail");
    }

 function successCallbacks(ret) {
        alert(111)
    }
    $(function() {
        var obj = new imgupload('/imgupload/test.php',successCallback,failCallback,0.5);
        $("#J_showModel").on("click",function() {
            obj.init();
            obj._showModel();
        });
        var objA = new imgupload('/imgupload/test.php',successCallbacks,failCallback,2);
        $("#showModel").on("click",function() {
            objA.init();
            objA._showModel();
        });
    })
</script>
</body>
</html>